<template>
	<!--仪器维护计划-->
	<div class="equipPlan">
		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				仪器保养计划
				<el-button  size="mini" type="primary" @click="addUpkeep" style="float:right;">添加仪器保养计划</el-button>
			</div>
			<div class="rowTable">
				<el-table :data="upKeepData" style="width: 100%;height:100%;" class="tableCon" size="mini" key="upKeepData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px" show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="startDate" label="开始日期" min-width="100px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('startDate')?scope.row.startDate.split('.')[0]:'/'}}

						</template>
					</el-table-column>
					<el-table-column property="cycle" label="周期" min-width="100px">
						<template slot-scope="scope">
							<!--每{{scope.row.spaceTime+scope.row.times}}次-->
							每{{scope.row.times + scope.row.spaceTime}}1次
						</template>
					</el-table-column>
					<el-table-column property="nextDate" label="下达日期" min-width="150px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">已停用</span>
							<span v-if="scope.row.status === 1">已启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" min-width="120px">
						<template slot-scope="scope">
							<el-button v-if="scope.row.status === 1" type="text" size="mini" @click="update(scope.$index, scope.row)">停用</el-button>
							<el-button v-if="scope.row.status === 0" type="text" size="mini" @click="update(scope.$index, scope.row)">启用</el-button>
							<el-button @click="edit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>
							<!--<el-button v-if="scope.row.status === 2" @click="edit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>-->

							<el-button type="text" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				检定校准计划
				<el-button size="mini" type="primary" @click="addVerification" style="float:right;">添加检定校准计划</el-button>
			</div>
			<div class="rowTable">
				<el-table :data="verificationData" style="width: 100%;height:100%;"  class="tableCon" size="mini" key="verificationData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px" show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="startDate" label="有效日期" min-width="100px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('startDate')?scope.row.startDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
					<el-table-column property="nextDate" label="下达日期" min-width="200px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
          <el-table-column property="request" label="校准参数" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.request?scope.row.request:'/'}}
          	</template>
          </el-table-column>
          <el-table-column property="remark" label="校准周期" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.remark?scope.row.remark:'/'}}
          	</template>
          </el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">已停用</span>
							<span v-if="scope.row.status === 1">已启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
					<el-table-column label="操作"  min-width="120px">
						<template slot-scope="scope">
							<el-button v-if="scope.row.status === 1" type="text" size="mini" @click="verificationUpdate(scope.$index, scope.row)">停用</el-button>
							<el-button v-if="scope.row.status === 0" type="text" size="mini" @click="verificationUpdate(scope.$index, scope.row)">启用</el-button>
							<!--<el-button v-if="scope.row.status === 2" @click="verificationEdit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>-->
							<el-button @click="verificationEdit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>


							<el-button type="text" size="mini" @click="verificationDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				期间核查计划
				<el-button  size="mini" type="primary" @click="addExamine" style="float:right;">添加期间核查计划</el-button>
			</div>
			<div class="rowTable">
				<el-table :data="examineData" style="width: 100%;height:100%;" class="tableCon" size="mini" key="examineData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px" show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="startDate" label="开始日期" min-width="100px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('startDate')?scope.row.startDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
					<!--<el-table-column
	          property="endDate"
	          label="结束日期"
	          min-width="100px">
	        </el-table-column>-->
					<el-table-column property="cycle" label="周期" min-width="100px">
						<template slot-scope="scope">
							每{{scope.row.times + scope.row.spaceTime}}1次
						</template>
					</el-table-column>


					<el-table-column property="nextDate" label="下达日期" min-width="150px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
          <el-table-column property="request" label="期间核查方法" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.request?scope.row.request:'/'}}
          	</template>
          </el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">已停用</span>
							<span v-if="scope.row.status === 1">已启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
					<el-table-column label="操作"  min-width="120px">
						<template slot-scope="scope">
							<el-button v-if="scope.row.status === 1" type="text" size="mini" @click="examineUpdate(scope.$index, scope.row)">停用</el-button>
							<el-button v-if="scope.row.status === 0" type="text" size="mini" @click="examineUpdate(scope.$index, scope.row)">启用</el-button>
							<!--<el-button v-if="scope.row.status === 2" @click="examineEdit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>-->
							<el-button @click="examineEdit(scope.$index, scope.row)" type="text" size="mini">编辑</el-button>

							<el-button type="text" size="mini" @click="examineDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!--表单-->
		<!--保养计划-->
		<div v-if='upKeepShow'>
			<add-upkeep :equipmentId="equipmentId" :upKeepEditData="upKeepEditData" :flag="upkeepFlag"></add-upkeep>
		</div>
		<!--检定校准计划-->
		<div v-if='verificationShow'>
			<verification :equipmentId="equipmentId" :verificationEditData="verificationEditData" :flag="verificationFlag"></verification>
		</div>
		<!--期间核查计划-->
		<div v-if='examineShow'>
			<examine :equipmentId="equipmentId" :examineEditData="examineEditData" :flag="examineFlag"></examine>
		</div>
	</div>
</template>

<script>
	import addUpkeep from './dialog/upkeep' //保养计划
	import verification from './dialog/verification' //检定校准计划
	import examine from './dialog/examine' //期间核查计划
	export default {
		components: {
			addUpkeep,
			verification,
			examine
		},
		props: {
			maintainData: Object
		},
		data() {
			return {
				upkeepFlag: '',
				verificationFlag: '',
				examineFlag: '',
				upKeepShow: false,
				equipmentId: '',
				verificationShow: false,
				examineShow: false,
				tableHeightD: ((window.innerHeight - 300) / 3 - 25),
				//保养计划列表
				upKeepData: [],
				upKeepEditData: {},
				//检定校准计划列表
				verificationData: [],
				verificationEditData: {},
				//期间核查计划列表
				examineData: [],
				examineEditData: {},
			}
		},
		mounted() {
			this.equipmentId = this.maintainData.id
			this.init()
		},
		methods: {
			init() {
				this.$http({
					apiUrl: 'resource/readEquipPlanList.htm',
					method: 'post',
					params: { id: this.maintainData.id },
				}).then(res => {
					if (res.code == 0) {
						this.upKeepData = []
						this.verificationData = []
						this.examineData = []
						res.data.forEach(i => {
							if (i.maintainType === "MA01") {
								this.upKeepData.push(i)
							}
							if (i.maintainType === "MA02") {
								this.verificationData.push(i)
							}
							if (i.maintainType === "MA03") {
								this.examineData.push(i)
							}
						})
					}
				})
			},
			edit(index, row) {
				// console.log(low)
				this.upkeepFlag = 'edit'
				this.upKeepEditData = row
				this.upKeepShow = true
			},
			addUpkeep() {
				this.upkeepFlag = 'look'
				this.upKeepShow = true
			},
			del(index, row) {
				this.$confirm('是否删除"' + row.name + '"?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/deleteEquipPlan.htm',
						method: 'post',
						params: { id: row.id },
						isJson: false
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: ' 删除成功!'
							})
						}
					})
				}).catch(() => { })
			},
			update(index, row) {
				let name, status
				if (row.status) {
					name = '停用'
					status = 0
				} else {
					name = '启用'
					status = 1
				}
				this.$confirm('是否' + name + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/updateEquipPlanStatus.htm',
						method: 'get',
						params: {
							id: row.id,
							status: status
						},
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: name + '成功!'
							})
						}
					})
				}).catch(() => { })
			},
			verificationEdit(index, row) {
				this.verificationFlag = "edit"
				this.verificationEditData = row
				this.verificationShow = true
			},
			addVerification() {
				this.verificationFlag = "look"
				this.verificationShow = true
			},
			verificationDel(index, row) {
				this.$confirm('是否删除"' + row.name + '"?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/deleteEquipPlan.htm',
						method: 'get',
						params: { id: row.id },
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: ' 删除成功!'
							})
						}
					})
				}).catch(() => { })
			},
			verificationUpdate(index, row) {
				let name, status
				if (row.status) {
					name = '停用'
					status = 0
				} else {
					name = '启用'
					status = 1
				}
				this.$confirm('是否' + name + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/updateEquipPlanStatus.htm',
						method: 'get',
						params: {
							id: row.id,
							status: status
						},
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: name + '成功!'
							})
						}
					})
				}).catch(() => { })
			},
			examineEdit(index, row) {
				this.examineFlag = "edit"
				this.examineEditData = row
				this.examineShow = true
			},
			addExamine() {
				this.examineFlag = "look"
				this.examineShow = true
			},
			examineDel(index, row) {
				this.$confirm('是否删除"' + row.name + '"?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/deleteEquipPlan.htm',
						method: 'get',
						params: { id: row.id },
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: ' 删除成功!'
							})
						}
					})
				}).catch(() => { })
			},
			examineUpdate(index, row) {
				let name, status
				if (row.status) {
					name = '停用'
					status = 0
				} else {
					name = '启用'
					status = 1
				}
				this.$confirm('是否' + name + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/updateEquipPlanStatus.htm',
						method: 'get',
						params: {
							id: row.id,
							status: status
						},
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								type: 'success',
								message: name + '成功!'
							})
						}
					})
				}).catch(() => { })
			},
		}
	}

</script>

<style scoped>
	.maintainBtn {
		position: absolute;
		right: 20px;
		top: 5px;
	}
</style>
<style>
	.equipPlan {
		height: 100%;
	}
	.equipPlan .tableThree{
		height: 33%;
	}
	.equipPlan .rowTable {
		width: 100%;
		margin-top: 5px;
		height: calc(100% - 45px)
	}
</style>
